<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom2" style="height: 210px;"></div>
    </div>
</template>
<script>
import { Bar } from '@antv/g2plot';

export default {
    data() {
        return {
            title: '检测预报'
        }
    },
    methods: {
        loadline() {
            const data = [
                { year: '2021 年', value: 38 },
                { year: '2022 年', value: 52 },
                { year: '2023 年', value: 61 },
                { year: '2024 年', value: 145 },
                { year: '2025 年', value: 48 },
            ];
            const bar = new Bar(this.$refs.bottom2, {
                data,
                xField: 'value',
                yField: 'year',
                seriesField: 'year',
                legend: {
                    position: 'top-left',
                },
                coordinate: [{ type: 'reflectX' }, { type: 'reflectY' }],
            });

            bar.render();
        }
    },
    mounted() {
        this.loadline();
    }
}

</script>
<style lang="less" scoped></style>